<template>
	<view class="submit-order">
		<!-- 提交订单 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">提交订单</text>
			</view>
		</u-navbar>
		<view
			class="authentication-container w-750 b-box  bg-fa po-re"
			:style="{ height: containerHeight }"
		>
			<scroll-view scroll-y="true" :style="{ height: containerHeight }">
				<view style="padding-bottom: 142rpx;">
					<!-- 1 -->
					<view class="w-750 b-box bg-fa d-flex flex-c ali-i-c just-c" style="height: 276rpx;">
						<image
							:src="Item.image"
							style="width: 60rpx;height: 60rpx;margin-bottom: 20rpx;"
						></image>
						<text
							class="fw-400 pf-sc"
							style="font-size: 30rpx;color: #262626;margin-bottom: 12rpx;"
						>
							{{ Item.name }}
						</text>
						<view class="d-flex flex-r ali-i-c just-s">
							<text class="pf-sc fw-600 po-re" style="font-size: 30rpx;color: #FF5C00;top:6rpx">
								¥{{ Item.price }}
							</text>
						</view>
						<view v-if="user.level != 0" style="font-size: 24rpx;color: #FF5C00;margin-top: 30rpx;">
							军人军属卡专享价
						</view>
					</view>
					<!-- 2 -->
					<view class="w-750 b-box bg-ff" style="padding: 0 36rpx;margin-bottom: 60rpx;">
						<view
							style="height: 112rpx;border-bottom: 1rpx solid #F6F6F6;position: relative;"
							class="w-100 d-flex flex-r ali-i-c po-re"
							@click="setaddress"
						>
							<text
								class="pf-sc fw-400 po-ab"
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);left: 0;"
							>
								车辆位置
							</text>
							<text
								class="pf-sc fw-400 po-ab"
								style="font-size: 30rpx;color: #555555;left: 158rpx;width: 440rpx;"
							>
								{{ selecAdress }}
							</text>
							<image :src="require('../../../static/Group 607@2x.png')" mode="" style="position: absolute;width: 39rpx;height: 55rpx;right: 16rpx;top: 28rpx;"></image>
						</view>
						<view
							style="border-bottom: 1rpx solid #F6F6F6;"
							class="w-100 d-flex flex-r ali-i-s just-s"
						>
							<text
								class="pf-sc fw-400"
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-top: 34rpx;"
							>
								停靠位置
							</text>
							<u-textarea
								border="none"
								placeholder="停车位或描述"
								v-model="weizhi"
								height="214rpx"
								:customStyle="{ padding: '36rpx', backgroundColor: '#ffffff' }"
								:placeholderStyle="{
									fontSize: '30rpx',
									fontFamily: 'PingFang SC-Regular, PingFang SC',
									fontWeight: '400',
									color: '#999999'
								}"
							></u-textarea>
							
						</view>

						<picker
							@change="bindPickerChange"
							:value="index"
							:range="CarList"
							range-key="carno"
							v-if="CarList.length > 0"
						>
							<view
								style="height: 112rpx;border-bottom: 1rpx solid #F6F6F6;"
								class="w-100 d-flex flex-r ali-i-c just-sw po-re"
							>
								<text
									class="pf-sc fw-400 po-ab"
									style="font-size: 30rpx;color: rgba(0,0,0,0.9000);left: 0;"
								>
									车辆信息
								</text>
								<text
									class="pf-sc fw-400 po-ab"
									style="font-size: 30rpx;color: #555555;left: 158rpx;"
								>
									{{ CarList[index].carno }}
								</text>
							</view>
						</picker>

						<view
							v-else
							style="height: 112rpx;border-bottom: 1rpx solid #F6F6F6;"
							class="w-100 d-flex flex-r ali-i-c just-sw po-re"
						>
							<text
								class="pf-sc fw-400 po-ab"
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);left: 0;"
							>
								车辆信息
							</text>
							<text
								@click="GoVehicleManagement"
								class="pf-sc fw-400 po-ab"
								style="font-size: 30rpx;color: #555555;left: 158rpx;"
							>
								请先去添加车辆
							</text>
						</view>

						<view
							style="height: 112rpx;border-bottom: 1rpx solid #F6F6F6;"
							class="w-100 d-flex flex-r ali-i-c just-sw po-re"
						>
							<text
								class="pf-sc fw-400 po-ab"
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);left: 0;"
							>
								服务项目
							</text>
							<text
								class="pf-sc fw-400 po-ab"
								style="font-size: 30rpx;color: #555555;left: 158rpx;"
							>
								{{ Item.name }}
							</text>
						</view>
						<!-- <picker mode="time" :value="time"  @change="bindTimeChange"> -->

						<view
							style="height: 112rpx;border-bottom: 1rpx solid #F6F6F6;"
							class="w-100 d-flex flex-r ali-i-c just-sw po-re"
						>
							<text
								class="pf-sc fw-400 po-ab"
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);left: 0;"
							>
								服务时间
							</text>
							<KXDateTime
								@click.native="dateNow"
								:date="date"
								:end="enddate"
								:start="startdate"
								@rundata="kxdatetimess"
								default="start"
								placeholder="请选择时间"
								style="margin-left: 150rpx;"
							></KXDateTime>
						</view>
						<!-- </picker> -->
						<view
							style="border-bottom: 1rpx solid #F6F6F6;"
							class="w-100 d-flex flex-r ali-i-s just-s"
						>
							<text
								class="pf-sc fw-400"
								style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-top: 34rpx;width: 180rpx;"
							>
								备注信息
							</text>

							<textarea
								v-model="beizhu"
								disabledColor="#ffffff"
								border="none"
								placeholder="备注"
								height="304rpx"
							:disabled="show==true"
								style="margin-top:40rpx;"
								:customStyle="{ padding: '36rpx', backgroundColor: '#ffffff' }"
							></textarea>
						</view>
					</view>

					<view class="w-750 b-box d-flex flex-r ali-i-c just-c">
						<u-button
							:throttleTime="700"
							@click="showPopup"
							:customStyle="{
								height: '88rpx',
								width: '670rpx',
								font: '500 32rpx PingFang SC',
								color: '#ffffff',
								borderWidth: '0rpx',
								background: 'linear-gradient(180deg,#4885C5 0%,#3B52A6 100%)',
								borderRadius: '100rpx'
							}"
							shape="square"
							text="提交订单"
						></u-button>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- popup -->
		<u-popup
			:show="show"
			mode="bottom"
			overlayOpacity="0.6"
			:round="25"
			@close="close"
			@open="open"
		>
			<view class=" d-flex flex-c ali-i-s just-s b-box" style="padding: 40rpx 0;">
				<!-- title -->
				<view class="d-flex flex-r ali-i-c just-c w-100 b-box po-re">
					<text class="fw-500 pf-sc fw-500" style="font-size: 32rpx;">选择支付方式</text>
					<text
						class="fw-500 pf-sc fw-500 po-ab"
						style="font-size: 32rpx; right:42rpx"
						@click="close"
					>
						×
					</text>
				</view>
				<!--  -->
				<view
					class=" d-flex flex-r ali-i-c just-sw w-100 b-box"
					@click="Select = 2"
					style="height: 120rpx;border-bottom: 2rpx solid #dedede;padding: 0 36rpx 0 32rpx;"
				>
					<view class="d-flex flex-r ali-i-c just-s">
						<image
							:src="require('../static/hy2.png')"
							style="width: 56rpx;height: 56rpx;margin-right: 16rpx;"
						></image>
						<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">余额支付</text>
						<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">（￥{{ user.money }}）</text>
					</view>
					<view v-if="Select === 2">
						<image :src="require('../static/xz.png')" style="width: 36rpx;height: 36rpx;"></image>
					</view>
				</view>
				<view
					class=" d-flex flex-r ali-i-c just-sw w-100 b-box"
					@click="Select = 1"
					style="height: 120rpx;border-bottom: 2rpx solid #dedede;margin-bottom: 60rpx;padding: 0 36rpx 0 32rpx;"
				>
					<view class="d-flex flex-r ali-i-c just-s">
						<image
							:src="require('../static/hy3.png')"
							style="width: 56rpx;height: 56rpx;margin-right: 16rpx;"
						></image>
						<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">微信支付</text>
						<!-- <text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">（2次可用）</text> -->
					</view>
					<view v-if="Select === 1">
						<image :src="require('../static/xz.png')" style="width: 36rpx;height: 36rpx;"></image>
					</view>
				</view>
				<!-- btn -->
				<view class="d-flex flex-r ali-i-c just-c w-100 b-box" style="margin-bottom: 12rpx;">
					<u-button
						@click="SubmitOrder"
						:customStyle="{
							height: '88rpx',
							width: '670rpx',
							font: '500 32rpx PingFang SC',
							color: '#ffffff',
							borderWidth: '0rpx',
							background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
							borderRadius: '44rpx'
						}"
						shape="square"
						text="确定"
					></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import QQMapWX from '@/common/qqmap-wx-jssdk';
import amap from '@/common/amap-wx.js';
import SimpleDateTimePicker from '../components/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue';
import KXDateTime from '../components/kx-datetime/kx-datetime.vue';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import { getcarlist, summitorder, paycxorder, getpaymoney, address } from '@/common/api.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
import uTextarea from '../components/uview-ui/components/u-textarea/u-textarea';
import uPopup from '../components/uview-ui/components/u-popup/u-popup';
export default {
	components: {
		'u-navbar': Unavbar,
		'u-button': Ubutton,
		'u-textarea': uTextarea,
		'u-popup': uPopup,
		SimpleDateTimePicker,
		KXDateTime
	},

	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			date: '',
			startdate: '',
			enddate: '2050-12-31 23:59',
			birthday: '选择服务时间',
			selecAdress: '',
			amapPlugin: null,
			key: '25d8a43c8ee55f7c0e6dfb815fdff544',
			index: 0,
			CarList: [],
			containerHeight: '',
			show: false,
			Select: '',
			Item: '',
			beizhu: '', //备注的信息
			index: 0,
			date: currentDate,
			time: '',
			weizhi: '', //停靠位置
			long: '',
			lat: '',
			yid: '',
			user: uni.getStorageSync('userInfo'),
			money: '' //下单时先获取用户的余额
		};
	},

	onLoad(options) {
		this.amapPlugin = new amap.AMapWX({
			key: this.key
		});

		// console.log(JSON.parse(options.itm),'提交订单页面接收的参数');
		this.Item = options;
		
		this.containerHeight = _containerHeight();
		this.getMap();
		this.getMoney();
     let year=new Date().toLocaleDateString()
		 let date=new Date().toTimeString().slice(0,5)
		 let startDate=year+' '+date
		 this.kxdatetimess(startDate)
	},
	onShow() {
		this.getCarlists();
		if (uni.getStorageSync('setadd')) {
			console.log(uni.getStorageSync('setadd'));
			this.selecAdress =
				uni.getStorageSync('setadd').address + '--' + uni.getStorageSync('setadd').title;
			this.long = uni.getStorageSync('setadd').location.lng;
			this.lat = uni.getStorageSync('setadd').location.lat;
		}
	},
	methods: { 
		dateNow() {
			let Time = new Date();
			let year = Time.getFullYear();
			let month = parseInt(Time.getMonth()) + 1;
			let day = Time.getDate();
			let hour = Time.getHours();
			let fen = Time.getMinutes();
			month = month < 10 ? '0' + month : month;
			hour = hour < 10 ? '0' + hour : hour;
			fen = fen < 10 ? '0' + fen : fen;
			this.startdate = `${year}/${month}/${day} ${hour}:${fen}`; //开始的时间从当前的时间开始
		},
		kxdatetimess(e) {
			console.log(e);
			this.date = e;
			this.time = new Date(e).getTime(); //将选中的时间转为时间戳 发请求
		},
		setaddress() {
			console.log(this.long, this.lat);
			uni.removeStorage({
				key: 'setadd'
			});
			var lng = this.long;
			var lat = this.lat;
			uni.navigateTo({
				url: `/userModelA/userA/select/select?longitude=${lng}&latitude=${lat}`
			});
		},
		getCarlists() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				type: 1
			};
			getcarlist(params).then(res => {
				this.CarList = res.data.data;
			});
		},
		//没有车辆的时候 跳转到车辆管理界面
		GoVehicleManagement() {
			//跳转到增加车辆
			uni.navigateTo({
				url: `/userModelA/userB/AddCarInfo/AddCarInfo?typecar=${2}`
			});
		},
		//支付前先获取用户的余额
		getMoney() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				cateid: this.Item.id
			};
			getpaymoney(params).then(res => {
				// console.log(res);
				this.money = res.data.data.money;
			});
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		// bindTimeChange(e) {
		// 	this.time = e.detail.value;
		// },
		//获取地理位置
		getMap(index) {
			var that = this;
			var qqmapsdk;
			this.amapPlugin.getRegeo({
				success: data => {
					uni.hideLoading();
					console.log(data);
					that.selecAdress=data[0].regeocodeData.formatted_address
					that.long = data[0].longitude;
					that.lat = data[0].latitude;
					qqmapsdk = new QQMapWX({
						key: '662BZ-2EAR6-M34S7-M4NPO-HFV3F-QEBTV' //自己申请的key
					});
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: that.lat,
							longitude: that.long
						},
						success: addressRes => {
							console.log(addressRes,'that.selecAdress');
							this.selecAdress =
								addressRes.result.address + addressRes.result.address_reference.landmark_l2.title;
								
						},
						fail(res) {}
					});
				}
			});
		},
		bindPickerChange(e) {
			// console.log(e);
			this.index = e.detail.value;
			// console.log(this.CarList[this.index].carno);  用户选择的车牌号
		},
		SubmitOrder() {
			//提交订单
			if (this.weizhi === '') {
				uni.showToast({
					title: '请填写停靠位置',
					icon: 'none'
				});
				return;
			}
			if (this.CarList.length == 0) {
				uni.showToast({
					title: '请选择要服务的车辆',
					icon: 'none'
				});
				return;
			}
			if (this.time == '') {
				uni.showToast({
					title: '请选择服务时间',
					icon: 'none'
				});
				return;
			}
			if(!uni.getStorageSync('userInfo').mobile){
				uni.showToast({
					title:'请先去设置您的手机号',
					icon:'none'
				})
				setTimeout(() => {
					uni.navigateTo({
						url:'/userModelA/userB/SetDataByUser/SetDataByUser'
					})
				}, 2000);
				this.show=false
				return
			}
			if (this.Select != 1 && this.Select != 2 && this.Select != 3) {
				uni.showToast({
					title: '请选择付款方式',
					icon: 'none'
				});
			} else {
				let params = {
					token: uni.getStorageSync('usertoken'),
					paytype: this.Select, //分类
					remarks: this.beizhu, //备注信息
					catid: this.Item.id, //服务分类id
					servertime: new Date(this.date).getTime() / 1000, //时间戳
					cardetail: this.CarList[this.index].carno, //选择的车牌号
					caraddress: this.selecAdress, //车辆位置
					cardesc: this.weizhi, //停靠位置
					lon: this.long,
					lat: this.lat
				};
				summitorder(params).then(res => {
					if (this.Select == 1 && res.data.code === 1) {
						this.towxpay(res.data.data.oid);
					} else if (this.Select == 2 && res.data.code === 1) {
						uni.showToast({
							title: '下单成功',
							icon: 'none',
							success() {
								setTimeout(() => {
									uni.navigateTo({
										url: '/userModelA/userA/PaySuccess/PaySuccess?oid=' + res.data.data.oid
									});
								}, 500);
							}
						});
						this.show = false;
					} else if (this.Select == 3 && res.data.code === 1) {
						uni.showToast({
							title: '下单成功',
							icon: 'none',
							success() {
								setTimeout(() => {
									uni.navigateTo({
										url: '/userModelA/userA/PaySuccess/PaySuccess?oid=' + res.data.data.oid
									});
								}, 500);
							}
						});
						this.show = false;
					} else {
						this.show = false;
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			}
		},
		towxpay(orderid) {
			paycxorder({
				id: orderid,
				token: uni.getStorageSync('usertoken')
			}).then(res => {
				console.log(res.data.data);
				var paydata = res.data.data;
				uni.requestPayment({
					provider: 'wxpay',
					// "orderInfo": {  },
					// "appid":paydata.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					nonceStr: paydata.nonceStr, // 随机字符串
					package: paydata.package, // 固定值
					partnerid: '1629006880', // 微信支付商户号
					prepayid: orderid, // 统一下单订单号
					timeStamp: paydata.timeStamp, // 时间戳（单位：秒）
					paySign: paydata.paySign, // 签名，这里用的 MD5/RSA 签名
					signType: paydata.signType, // 签名算法
					success(res) {
						uni.navigateTo({
							url: '/userModelA/userA/PaySuccess/PaySuccess?oid=' + orderid
						});
						this.show = false;
					},
					fail(e) {
						console.log(e);
						uni.showToast({
							title: e,
							icon: 'none'
						});
					}
				});
			});
		},

		//弹框
		showPopup() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		open() {}
		//弹框
	}
};
</script>

<style lang="scss">
.submit-order {
}
</style>
